<CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml"> 
  <head>
    <title><g:message code="default.welcome.title"/></title>
    <meta name="layout" content="main" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript">
        function addBookmark(bookmark) {
            var textDisplay = bookmark.url.length < 48 ? bookmark.url : bookmark.url.slice(0,47) + '...'
            var bMark = $('<li><a href=\"' + bookmark.url +'\" target=\"_blank\">' + textDisplay + '</a></li>')
            var deleteIcon = $('<img class="trash-icon" src="${resource(dir:'images/skin', file:'trash-can.png')}"/>')
            deleteIcon.click(function() {
                $.post('${createLink(action:'delete')}',
                        {id:bookmark.id},
                        function(data) {
                            bMark.fadeOut(function() {
                                bMark.remove()   
                            })
                        })
            })
            bMark.append(deleteIcon)
            bMark.hide()
            $('#bmarks-list').prepend(bMark)
            bMark.fadeIn()
        }
    
        function clearForm() {
            $('#url').val('')
         }

        $(document).ready(function() {
            $.get('${createLink(action:'list')}', function(data) {
            $.each(data, function() {
                addBookmark(this)
            })
        })
    })
    </script>
  </head>
  <body>
    <g:formRemote name="myForm" update="updateMe" url="[ controller: 'bookmark', action: 'save']" onSuccess="addBookmark(data);clearForm()" >
      <input type="text" class="input-text-big" name="url" id="url" size="50" maxlength="200" class="input_form" />
      <g:submitButton name="bookmark-submit" value="Bookmark it" />    
    </g:formRemote>
    <div id="bookmarks">
    <ul id="bmarks-list">
    </ul>
    </div>
  </body>
</html>
